<template>
  <div id="lr">
    <div class="container">
      <div class="box" :style="{ left: islogin ? '25px' : '425px' }">
        <keep-alive>
          <component :is="islogin ? 'Login' : 'Register'"></component>
        </keep-alive>
      </div>
      <div>
        <h1>欢迎使用ToDo</h1>
        <p>从现在开始</p>
        <p>让事情变得更简单</p>
        <button @click="gologin">去登陆</button>
      </div>
      <div>
        <h1>欢迎使用ToDo</h1>
        <p>从现在开始</p>
        <p>让事情变得更简单</p>
        <button @click="goregister">去注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import Login from '../components/login.vue';
import Register from '../components/register.vue';
export default {
  data() {
    return {
      islogin: true,
    };
  },
  components: {
    Login,
    Register,
  },
  methods: {
    gologin() {
      this.islogin = true;
    },
    goregister() {
      this.islogin = false;
    },
  },
};
</script>

<style scoped>
#lr {
  height: 100vh;
  color: rgb(37, 33, 33);
}
.container {
  box-shadow: 1px 1px 9px black;
  height: 350px;
  width: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-around;
}
.container div {
  width: 350px;
  height: 100%;
  text-align: center;
}
h1 {
  margin-top: 50px;
  margin-bottom: 70px;
  font-weight: normal;
}
button {
  margin: 50px;
  width: 100px;
  height: 35px;
  outline: none;
  cursor: pointer;
  background: white;
  transition: all 0.3s;
  border: 1px solid black;
}
button:hover {
  color: white;
  background-color: #0997f7;
}
.container div.box {
  position: absolute;
  top: -25px;
  left: 25px;
  width: 350px;
  height: 400px;
  transition: all 0.5s;
}
</style>
